<!-- 动态上下翻滚的表格 -->
<template>
  <div>
    <!-- <div>报警预警</div> -->
    <DyMap style="position: relative;"></DyMap>
    <!-- <Map style="position: relative;"></Map> -->
    <div style="position: absolute;top: 10px;left: 80px;">
      <el-space>
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>
                <text class="textTitle">预警列表</text>                  
                </span>
                <div class="TitleHeader">共有<span class="NumberTotal">{{ bjlist.length  }} </span>处预警，请及时处理 </div>

              <!-- <el-button class="button" text>Operation button</el-button> -->
              
            </div>
            <!-- <img src="/public/icon/Bjd@3x.gif" alt=""> -->

          </template>
          <div class="list">
            <div class="textItem" v-for="(item, index) in bjlist" :key="index" @click="pipeBut(item)">
              <div class="BjListLeft">
                <img src="/public/icon/Bjd@3x1.png" style="width: 25px;height: 25px;" alt="">
              </div>
              <div class="BjListCenter">
                <div class="BjListCenterTltle">{{ item.stationname }}</div>
                <!-- <div>
                  <div class="BjListCenterXh">{{ item.value }}</div>
                </div> -->
                <div>
                  <div class="BjListCenterXh">{{ item.information }} {{ item.value }}</div>
                </div>
                <div class="BjListCenterTimes">{{ item.starttime }}</div>
              </div>
            </div>
          </div>


        </el-card>
      </el-space>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted,onBeforeUnmount } from 'vue';
import DyMap from '../../components/DyMap.vue';
import Map from '../../components/Map.vue';
import { flyToByGeom } from '../../tools/highlight-feature'
import { AlarmRecord } from '../../http/http'
import { proj4Epsg } from '../../tools/proj4_EPSG'
import bus from '../../tools/eventBus'
import { useRoute } from 'vue-router';
 const route = useRoute();
const isActive = ref('1')
const bjlist = ref([])
const intervalId = ref(null)
function onSubmit() {
  AlarmRecord({ isActive:isActive.value}).then((res) => {
    if(res.status === 200){
      stopTimer(); // 停止之前的定时器
      startTimer();
    }else{
      stopTimer()
    }
    // console.log(res);
    console.log(res.data.returnValue.result);
    bjlist.value = res.data.returnValue.result    
    bus.emit('bjlist', {
      bllist: bjlist.value
    })
    bjlist.value.forEach(element => {
    const valueNumber = element.information.slice(0,2)
  const a = ensureUnit(valueNumber)
  element.value = Number(Number(element.value).toFixed(4))
  // console.log(element.value,'element.value');

  // console.log(a,'a');
  // element.value =element.value.toFixed(4)
     switch (valueNumber) {// 添加单位字段
      case '余氯':
        //  data.v=data.v+'NTU'
        element.value=ensureUnit(element.value,'mg/L')
          break;
      case '浊度':
      element.value=ensureUnit( element.value,'NTU')
          break;
      case '压力':
          // data.v=data.v+'mg/L'
          element.value=ensureUnit(element.value,'Mpa')
      break;
    }
     
});
  })
}

// let intervalId = null;
function startTimer() {
    // 每五分钟（300000毫秒）调用一次 onSubmit 方法
    intervalId.value = setInterval(onSubmit, 300000);
}
function stopTimer() {
    if (intervalId.value) {
        clearInterval(intervalId.value);
        intervalId.value = null;
    }
}

onBeforeUnmount(() => {
  console.log('离开当前页面，销毁定时器');
  stopTimer()
    });


 
onMounted(() => {
  onSubmit()
  console.log(route.path);
  
})


// // 保留尾数
// function reserveMantissa(data){
//   return data.reduce((sum,item)=>{
//     return sum+item.rgsl
//   },0).toFixed(4);
// }

function pipeBut(e) {
  // console.log('e',e.geo_x,e.geo_y);
  const geom = [e.geo_x, e.geo_y]
  const geomNumber = geom.map(Number);
  // console.log(geomNumber);
  let lonlat = proj4Epsg(geomNumber)
  console.log(lonlat);

// 检查 lonlat 是否不等于 [0, 0]
if (lonlat[0] !== 0 || lonlat[1] !== 0) {
    flyToByGeom(lonlat);
}

}

// 创建一个函数来格式化数字并添加单位
function ensureUnit(value, unit) {
    if (typeof value === 'number') {
        return `${value}${unit}`;
    } else if (typeof value === 'string') {
        // 检查是否已经包含单位
        if (!value.endsWith(unit)) {
            return `${value}${unit}`;
        }
        return value;
    }
    return value;  // 如果不是数字或字符串，直接返回原值
}

</script>

<style lang="scss" scoped>
.TitleHeader{
  font-family: PingFangSC-Regular;
font-size: 14px;
color: #999999;
line-height: 12px;
font-weight: 400; 
// padding-left: 15px;
margin-top: 10px;
background-color: #fff;
}
.NumberTotal{
  font-family: PingFangSC-Regular;
font-size: 12px;
color: #F46160;
line-height: 12px;
font-weight: 400;
}
.textTitle {
  font-family: PingFangSC-Medium;
  font-size: 16px;
  color: #232426;
  line-height: 16px;
  font-weight: 600;
}
.card-header{
  height: 30px;
  line-height: 30px;
  padding-left: 15px;
}
.list {
  width: 320px;
  height: 450px;
  overflow-y: scroll;
  margin-top: 15px;
}

.box-card {
  width: 327px;
  height: 500px;
  background-image: linear-gradient(160deg, rgba(253,254,255,0.96) 21%, rgba(247,250,254,0.86) 100%);
box-shadow: 0px 2px 8px 0px rgba(10,35,59,0.1);
border-radius: 12px;
}

.textItem {
  display: flex;
  // border: 1px solid #ddd;
  // /* 可选的边框，用于示意容器的边界 */
  margin: 5px;
  // /* 可选的外边距 */
  padding: 5px;
  // /* 可选的内边距 */
  // height: 120px;
  /* 设置容器的高度，根据需要调整 */
}

/* 滚动条整体样式 */
.list::-webkit-scrollbar {
  width: 12px;
  /* 宽度可以根据需要调整 */
}

/* 滚动条轨道（背景）样式 */
.list::-webkit-scrollbar-track {
  background: #f1f1f1;
  /* 轨道的背景颜色 */
  border-radius: 10px;
  /* 轨道的圆角 */
}

/* 滚动条滑块样式 */
.list::-webkit-scrollbar-thumb {
  /* background: #888; 滑块的背景颜色 */
  border-radius: 10px;
  /* 滑块的圆角 */
  border: 3px solid #d8dce6;
  /* 滑块的边框 */
}

/* 滚动条滑块在鼠标悬停时的样式 */
.list::-webkit-scrollbar-thumb:hover {
  background: #cbe4ff;
  /* 鼠标悬停时滑块的背景颜色 */
}

.el-tabs--card>.el-tabs__header .el-tabs__nav,
.el-tabs__nav-scroll {
  background-color: rgba(255, 255, 255, 0.9);
  /* 50% 透明度的白色背景 */
}

.BjListCenterTime {
  margin-left: 14px;
  font-size: 14px;
  display: flex;
  /* 启用 Flexbox 布局 */
  align-items: center;
  /* 垂直居中对齐 */
  height: 27px;
  color: gray;
}

.BjListCenterTimes {
  // font-size: 14px;
  display: flex;
  /* 启用 Flexbox 布局 */
  align-items: center;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #999999;
  line-height: 18px;
  font-weight: 400;
}

.BjListCenterTltle {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #1A1A1A;
  line-height: 14px;
  font-weight: 400;
}

.BjListCenterXh {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #999999;
  line-height: 30px;
  font-weight: 550;
}

.BjListCenter {
  padding: 5px;
  padding-left: 20px;
}

.BjListLeft {
  padding-bottom: 30px;
  display: grid;
  place-items: center;
  /* 水平和垂直居中 */
}

.inputValue {
  padding: 0;
}

.el-card[data-v-b3c41dee] {
    --el-card-border-color: var(--el-border-color-light);
    --el-card-border-radius: 4px;
    --el-card-padding: 5px;
    --el-card-bg-color: var(--el-fill-color-blank);
    background-color: var(--el-card-bg-color);
    border: 1px solid var(--el-card-border-color);
    border-radius: var(--el-card-border-radius);
    color: var(--el-text-color-primary);
    overflow: hidden;
    transition: var(--el-transition-duration);
    border-radius: 12px;
}
</style>
